<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>图片上传</title>
    <link rel="stylesheet" href="../Resource/layui/css/layui.css">
    <link rel="stylesheet" href="../Resource/index.css">
    <script src="../Resource/layui/layui.js"></script>
    <script src="../Resource/layui/layui.all.js"></script>
    <script src="../Resource/croppers.js"></script>
    <link href="${pageContext.request.contextPath}/image/logo.png" rel="Shortcut Icon">
    <style type="text/css">
        .inputClass{
            background-color: rgba(0, 255, 0, 0);
            border: 1px solid lightgray;
            border-radius:30px;
            text-align: center;
            width: 300px;
            font-size: 14px;
            height: 38px;
        }

        td{
            height: 60px;
            text-align: center;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        }
        .layui-icon{
            font-size: 3px;
        }

        .left_td{
            width: 100px;
        }
        .big_div{
            /*border: 1px solid rgba(255,249,12,0.38);*/
            /*border: 1px dashed #ff8f05;*/
            position: absolute;
            top: 5px;
            left: 20px;
            width: 550px;
            height: 590px;
            /*background-color: rgba(255, 252, 222, 0.2);*/
            border-radius: 10px;
            text-align: center;
        }
        /*.big_div:hover{*/
        /*    background-color: rgba(255, 198, 2, 0.34);*/
        /*}*/
        .touimg:hover{
            text-align: center;
            /*border:1px #ffd005 ridge;*/
            width: 150px;
            height: 150px;

        }
        #iconGr{
            font-size:70px;
            position: absolute;
            top: 20px;
            left:300px;
        }
        .boots{
            border-radius: 20px;
            border: 1px solid #d6c1ab;
            background:#d6c1ab;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            margin-left: 100px;
            letter-spacing: 1px;
            text-transform: uppercase;
            transition: transform 80ms ease-in;
            cursor: pointer;
            width:300px;
            height: 40px;
        }

    </style>
    <script>

        $.ajax({
            async: false,
            type: "POST",
            url: "/Resource/uploadImgUrl",
            data: {
                aAccount: str,
                imgUrl: imagePathNew
            }
        });

    </script>
</head>
<body style="background: #F4F3EF;">
<div style="height: 600px;
            border:1px gray dotted;
            border-top: 0px;
            border-bottom: 0px;
            border-right: 0px;
            position: absolute;
            top: 20px;
            left: 640px;
    "></div>
<div style="position: absolute;top: 150px;left: 100px;">
    <img src="${pageContext.request.contextPath}/image/bgss.png" >
</div>
<div class="big_div" >
    <center>
        <div style="width: 140px;height: 140px;border:0px green solid;line-height: 210px;margin-left:80px;">
            <img class="touimg" title="头像" id="upload-button" style="width: 140px;height: 140px;border-radius: 100px;"
                 src="${requestScope.adminsData.aImgUrl}" style="width:500px;height:300px;"/>
        </div>
    </center>
    <div id="xgdix" style="width: 480px;border: 0px solid red;text-align: center;position: absolute;top: 200px;left: 70px">
        <form action="/amendAdmins" method="post">
            <table style="text-align: center;border-bottom-color: #fffc82;">
                <input name="aId" value="${requestScope.adminsData.aId}" style="display:none" readonly>
                <tr class="tr_boot">
                    <td class="left_td"><i class="layui-icon" title="账号">&#xe66f;</i></td>
                    <td><input class="inputClass" name="aAccount"  type="text" value="${requestScope.adminsData.aAccount}"/></td>
                </tr>
                <tr class="tr_boot">
                    <td class="left_td"><i class="layui-icon" title="密码">&#xe66f;</i></td>
                    <td><input class="inputClass" name="aPassword" type="text" value="${requestScope.adminsData.aPassword}"/></td>
                </tr>
                <tr class="tr_boot">
                    <td class="left_td"><i  class="layui-icon" title="权限">&#xe613;</i></td>
                    <td><input class="inputClass" name="power"  class="inputClass" type="text" value="${requestScope.adminsData.power}"/></td>
                </tr>
                <tr class="tr_boot">
                    <td class="left_td"><i  class="layui-icon" title="用户姓名">&#xe66f;</i></td>
                    <td><input class="inputClass" name="aName"  type="text" value="${requestScope.adminsData.aName}"/></td>
                </tr>
                <tr class="tr_boot">
                    <td class="left_td"><i class="layui-icon" title="身份证号">&#xe63c;</i></td>
                    <td><input class="inputClass" name="aCode" type="text" value="${requestScope.adminsData.aCode}"/></td>
                </tr>
                <tr class="tr_boot">
                    <td class="left_td"><i  class="layui-icon" title="手机号">&#xe678;</i></td>
                    <td><input class="inputClass" name="aTel" type="text" value="${requestScope.adminsData.aTel}"/></td>
                </tr>
                <tr>
                    <td colspan="2" ><input class="boots" type="submit" value="修改"/></td>
                </tr>
            </table>
        </form>
    </div>

</div>

</div>
<input id="aAccount" style="display: none;"
       value="${sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal.username}"/>
</body>
</html>
<script>



    //Demo
    layui.use('form', function () {
        let form = layui.form;
        let $ = layui.$;
        //监听提交
        form.on('submit(formDemo)', function (data) {
            $.ajax({
                url: "/upload/addImage",
                method: "post",
                data: data.field,
                dataType: "JSON",
                success: function (res) {
                    if (res == 1) {
                        layer.msg("成功提交数据库");
                    }
                }
            })
            return false;
        });
    });
    var imagePathNew;
    layui.config({
        base: './' //layui自定义layui组件目录
    }).use(['form', 'croppers'], function () {
        var $ = layui.jquery
            , form = layui.form
            , croppers = layui.croppers
            , layer = layui.layer;
        //创建一个头像上传组件
        croppers.render({
            elem: '#upload-button' //绑定元素
            , exts: 'jpg|webp|png'//只允许上传excel文件
            , saveW: 150     //保存宽度
            , saveH: 150
            , mark: 1 / 1    //选取比例
            , area: '1000px'  //弹窗宽度
            , url: '/upload/image'  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
            , done: function (res) { //上传完毕回调
                if (res.code != 1) {
                    //失败
                    layer.msg(res.msg);
                } else {
                    //成功
                    layer.msg(res.msg);
                    //首先我们要获得,我们上传之后a的访问路径
                    let imagePath = res.data.src;
                    imagePathNew = imagePath;
                    var str = $("#aAccount").val();
                    console.log(str);
                    $.ajax({
                        async: false,
                        type: "POST",
                        url: "/Resource/uploadImgUrl",
                        data: {
                            aAccount: str,
                            imgUrl: imagePathNew
                        }
                    });
                    $("#upload-button").attr("src", imagePath);
                    $("#goodsImages").attr("value", imagePath);
                    //修改iframe 父页面中的 headImg的src为upload-button的src
                    $(window.parent.document).find("#headImg").attr("src",$("#upload-button").attr("src"));
                }
            }
        });
    });

    // layui.use('upload', function(){
    //     let upload = layui.upload;
    //     let $ = layui.$;
    //     //执行实例
    //     let uploadInst = upload.render({
    //         elem: '#upload-button', //绑定元素
    //         exts: 'jpg|webp|png',//只允许上传excel文件
    //         url: '/upload/image' //上传接口
    //         ,done: function(res){
    //             if (res.code != 1) {
    //                 //失败
    //                 layer.msg(res.msg);
    //             } else {
    //                 //成功
    //                 layer.msg(res.msg);
    //                 //首先我们要获得,我们上传之后a的访问路径
    //                 let imagePath = res.data.src;
    //                 console.log(imagePath);
    //                 $("#image").attr("src",imagePath);
    //                 $("#goodsImages").attr("value",imagePath);
    //             }
    //         }
    //         ,error: function(){
    //             //请求异常回调
    //         }
    //     });
    // });
</script>
<script>
    layui.use(['form','layer'], function () {
        var layer = layui.layer;
        var form = layui.form;
        layer.ready(function () {
            layer.open({
                title: false,
                skin: 'form-layer-after',
                type: 1,
                area: ["auto", 'auto'], //宽，高
                content: $('#xgdix'), // 弹出层容器
                btn: ['修改成功']
            });
        })

    });
</script>